<template>
    <div class="profile-promotion">
        <div class="header">其他功能</div>
        <div class="body row">
            <div class="item column" @click="toPromotionPage">
                <div class="icon">
                    <img :src="require('@/assets/icon/profile_store.png')" />
                </div>
                <div class="title">商家入驻</div>
            </div>

            <div class="item column" @click="toPromotionPage">
                <div class="icon">
                    <img :src="require('@/assets/icon/profile_share.png')" />
                </div>
                <div class="title">推荐有奖</div>
            </div>

            <div class="item column" @click="toPromotionPage">
                <div class="icon">
                    <img
                        :src="require('@/assets/icon/profile_promotion.png')"
                    />
                </div>
                <div class="title">更多福利</div>
            </div>

            <div class="item column" @click="toPromotionPage">
                <div class="icon">
                    <img :src="require('@/assets/icon/profile_help.png')" />
                </div>
                <div class="title">帮助与反馈</div>
            </div>
        </div>
        <NoticePopup ref="noticePopup" />
    </div>
</template>

<script>
import NoticePopup from "./noticePopup";
export default {
    components: {
        NoticePopup
    },
    data() {
        return {};
    },

    methods: {
        toPromotionPage() {
            this.showNoticePopup();
        },
        showNoticePopup() {
            const comp = this.$refs.noticePopup;
            comp.open();
        }
    }
};
</script>


<style lang="less" scoped>
.profile-promotion {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px 30px 30px;
    .header {
        padding: 20px 0 0 0;
        font-size: 28px;
    }
    .body {
        padding-top: 30px;
        width: 100%;
        overflow-x: scroll;
        justify-content: space-between;

        .item {
            align-items: center;
            .icon {
                width: 60px;
                margin-bottom: 10px;
            }
            .title {
                font-size: 26px;
            }
        }
    }
}
</style>